<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <nav>
        <ul>
            <li><a href="#basic-shapes">一、基本形状</a></li>
            <li><a href="#fills-strokes">二、填充和线条</a></li>
        </ul>
    </nav>
    <main>
        <h1>SVG</h1>
        <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial" target="_blank" rel="noopener noreferrer">SVG</a> 是一种可缩放矢量图形。它是一种 XML 语言。</p>
        <p>SVG 定义了基本几何形状，比如圆形、矩形及各种曲线。另外，还可以通过 <code>&lt;g&gt;</code> 定义图形群组。</p>
        <p>2003 年，SVG 成为推荐标准。目前最完整的 SVG 版本是 1.1。除“完整版”外，W3C 还引入了 SVG Tiny 和 SVG Basic 两种精简版，主要面向移动设备。2008 年，SVG Tiny 1.2 成为 W3C 推荐标准。</p>
        <p>下面是一个简单的例子</p>
        <svg version="1.1" width="300" height="200">
            <rect width="100%" height="100%" fill="red"></rect>
            <circle cx="150" cy="100" r="80" fill="green"></circle>
            <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
        </svg>

        <p>通过 <code>width</code> 和 <code>height</code> 控制显示区域尺寸（不是它的坐标系统宽度）。通过 <code>viewBox</code> 控制显示内容的画布区域。</p>
        <svg version="1.1" width="300" height="200" viewBox="0 0 150 100" xmlns="http://www.w3.org/2000/svg">
            <rect width="100%" height="100%" fill="red"></rect>
            <circle cx="150" cy="100" r="80" fill="green"></circle>
            <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>
        </svg>

        <p>下面展示一个位于 <code>div</code> 容器内，宽高均为 100% 的图像。</p>

        <div class="container" style="width:200px; height: 200px; border: 1px solid yellow;">
            <svg width="100%" height="100%" viewBox="0 0 200 200">
                <circle cx="100" cy="100" r="80" fill="none" stroke="red" stroke-width="5" stroke-dasharray="15, 5" />
            </svg>
        </div>


        <h2 id="basic-shapes">一、基本形状</h2>
        <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
            <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
        stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
        stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
    </svg>
        <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths" target="_blank" rel="noopener noreferrer">Paths</a> 是最强大的基本图形。</p>

        <h2 id="fills-strokes">二、填充和线条</h2>
        <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes" target="_blank">设置填充和线条</a>的最简单属性是 <code>fill</code> 和 <code>stroke</code>。</p>
        <svg width="120" height="120" version="1.1">
            <rect x="10" y="10" width="100" height="100" stroke="blue" stroke-width="10" stroke-opacity="0.5" fill="purple" fill-opacity="0.5" />
        </svg>
        <p>填充和线条的透明度分别通过 <code>fill-opacity</code> 和 <code>stroke-opacity</code> 设置。</p>
        <p>设置线条端点形状，使用 <code>stroke-linecap</code>。线宽使用 <code>stroke-width</code> 设定。</p>
        <svg width="160" height="140" version="1.1">
            <line x1="40" x2="120" y1="20" y2="20" stroke="black" stroke-width="20" stroke-linecap="butt" />
            <line x1="40" x2="120" y1="60" y2="60" stroke="black" stroke-width="20" stroke-linecap="square" />
            <line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round" />
        </svg>
        <p>交叉形状使用 <code>stoke-linejoin</code> 设定。</p>
        <svg width="160" height="280" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polyline points="40 60 80 20 120 60" stroke="black" stroke-width="20"
            stroke-linecap="butt" fill="none" stroke-linejoin="miter"/>

        <polyline points="40 140 80 100 120 140" stroke="black" stroke-width="20"
            stroke-linecap="round" fill="none" stroke-linejoin="round"/>

        <polyline points="40 220 80 180 120 220" stroke="black" stroke-width="20"
            stroke-linecap="square" fill="none" stroke-linejoin="bevel"/>
        </svg>

        <p>设定虚线样式，使用 <code>stroke-dasharray</code> 属性</p>
        <svg width="200" height="200">
            <circle cx="100" cy="100" r="80" stroke="blue" fill="none" stroke-dasharray="10, 20" />
        </svg>
    </main>
</body>
</html>